<template>
    <div class="chart-container" ref="chartContainer"></div>
</template>

<script setup>
import { ref, onMounted, watch, onBeforeUnmount } from 'vue';
import * as echarts from 'echarts';

const props = defineProps({
    chartData: {
        type: Array,
        required: true,
        default: () => []
    }
});

const chartContainer = ref(null);
let chart = null;

const initChart = () => {
    if (!chartContainer.value) return;

    chart = echarts.init(chartContainer.value);

    const option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            data: ['工业用电', '商业用电', '居民用电', '其他用电'],
            textStyle: {
                color: '#666'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: props.chartData.map(item => item.month),
            axisLine: {
                lineStyle: {
                    color: '#999'
                }
            },
            axisLabel: {
                color: '#666'
            }
        },
        yAxis: {
            type: 'value',
            name: '能耗 (kWh)',
            nameTextStyle: {
                color: '#666'
            },
            axisLine: {
                lineStyle: {
                    color: '#999'
                }
            },
            axisLabel: {
                color: '#666',
                formatter: '{value} kWh'
            },
            splitLine: {
                lineStyle: {
                    type: 'dashed',
                    color: '#ddd'
                }
            }
        },
        series: [
            {
                name: '工业用电',
                type: 'bar',
                stack: 'total',
                emphasis: {
                    focus: 'series'
                },
                data: props.chartData.map(item => item.industrial),
                itemStyle: {
                    color: '#1890ff'
                },
                animationDelay: function (idx) {
                    return idx * 50;
                }
            },
            {
                name: '商业用电',
                type: 'bar',
                stack: 'total',
                emphasis: {
                    focus: 'series'
                },
                data: props.chartData.map(item => item.commercial),
                itemStyle: {
                    color: '#52c41a'
                },
                animationDelay: function (idx) {
                    return idx * 50 + 100;
                }
            },
            {
                name: '居民用电',
                type: 'bar',
                stack: 'total',
                emphasis: {
                    focus: 'series'
                },
                data: props.chartData.map(item => item.residential),
                itemStyle: {
                    color: '#faad14'
                },
                animationDelay: function (idx) {
                    return idx * 50 + 200;
                }
            },
            {
                name: '其他用电',
                type: 'bar',
                stack: 'total',
                emphasis: {
                    focus: 'series'
                },
                data: props.chartData.map(item => item.others),
                itemStyle: {
                    color: '#722ed1'
                },
                animationDelay: function (idx) {
                    return idx * 50 + 300;
                }
            },
            {
                name: '总能耗',
                type: 'line',
                smooth: true,
                showSymbol: false,
                data: props.chartData.map(item =>
                    item.industrial + item.commercial + item.residential + item.others
                ),
                itemStyle: {
                    color: '#f5222d'
                },
                lineStyle: {
                    width: 3,
                    color: '#f5222d'
                },
                z: 2,
                animationDelay: function (idx) {
                    return idx * 50 + 400;
                }
            }
        ],
        animationEasing: 'elasticOut',
        animationDelayUpdate: function (idx) {
            return idx * 5;
        }
    };

    chart.setOption(option);

    window.addEventListener('resize', resizeChart);
};

const updateChart = () => {
    if (!chart) return;

    chart.setOption({
        xAxis: {
            data: props.chartData.map(item => item.month)
        },
        series: [
            {
                data: props.chartData.map(item => item.industrial)
            },
            {
                data: props.chartData.map(item => item.commercial)
            },
            {
                data: props.chartData.map(item => item.residential)
            },
            {
                data: props.chartData.map(item => item.others)
            },
            {
                data: props.chartData.map(item =>
                    item.industrial + item.commercial + item.residential + item.others
                )
            }
        ]
    });
};

const resizeChart = () => {
    chart && chart.resize();
};

watch(() => props.chartData, () => {
    updateChart();
}, { deep: true });

onMounted(() => {
    initChart();
});

onBeforeUnmount(() => {
    if (chart) {
        chart.dispose();
        chart = null;
    }
    window.removeEventListener('resize', resizeChart);
});
</script>

<style scoped>
.chart-container {
    width: 100%;
    height: 300px;
}
</style>